<template>
  <div id="FinancialDetail">
    <div class="homeTitle">理财产品详情</div>
    <table class="sTable" style="margin-top: 10px;">
      <tr>
        <td><span>*</span>产品代码</td>
        <td><el-input v-model="data.code" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>产品名称</td>
        <td><el-input v-model="data.name" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>产品类型</td>
        <td>
          <el-select v-model="data.type" placeholder="请选择" size="small">
            <el-option v-for="item in cplx" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>利率类型</td>
        <td>
          <el-select v-model="data.rateType" placeholder="请选择" size="small">
            <el-option v-for="item in lllx" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>收益模式</td>
        <td>
          <el-select v-model="data.revenuePattern" placeholder="请选择" size="small">
            <el-option v-for="item in syms" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>发行方式</td>
        <td>
          <el-select v-model="data.issuingMode" placeholder="请选择" size="small">
            <el-option v-for="item in fxff" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>发售方分类</td>
        <td>
          <el-select v-model="data.classification" placeholder="请选择" size="small">
            <el-option v-for="item in fsffl" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span v-if="data.classification=='银行类金融机构'"><span>*</span><span style='color: white;'>发售银行性质</span></span></td>
        <td>
          <el-select v-if="data.classification=='银行类金融机构'" v-model="data.issuingBank" placeholder="请选择" size="small" >
            <el-option v-for="item in fsyhxz" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>收益方式</td>
        <td>
          <el-select v-model="data.incomeMethod" placeholder="请选择" size="small">
            <el-option v-for="item in syfs" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span v-if="data.incomeMethod=='非保证收益型'"><span>*</span><span style='color: white;'>保本类型</span></span></td>
        <td>
          <el-select v-if="data.incomeMethod=='非保证收益型'" v-model="data.evenType" placeholder="请选择" size="small">
            <el-option v-for="item in bblx" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>期限结构</td>
        <td>
          <el-select v-model="data.termStructure" placeholder="请选择" size="small">
            <el-option v-for="item in qxjg" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span v-if="data.termStructure=='固定期限'"><span>*</span><span style='color: white;'>期限</span></span></td>
        <td style="display: flex;" v-if="data.termStructure=='固定期限'">
          <el-input v-model="data.term" placeholder="请输入" size="small"></el-input>
          <!-- <span style="width: 10%;"></span> -->
          <!-- <el-input v-model="qixian" placeholder="请输入" size="small" @blur="qixianBlur"></el-input>
          <el-select v-model="qixiandanwei" placeholder="请选择" size="small" @change="qixianBlur">
            <el-option v-for="item in qxdw" :key="item" :label="item" :value="item" ></el-option>
          </el-select>
          <td v-else></td> -->
        </td>
        <td v-else></td>
      </tr>
      <tr>
        <td><span>*</span>起息日</td>
        <td><el-date-picker v-model="data.interestDate" type="date" placeholder="选择日期" size="small"></el-date-picker></td>
        <td><span v-if="data.termStructure=='固定期限'"><span>*</span><span style='color: white;'>到期日</span></span></td>
        <td>
           <el-date-picker v-if="data.termStructure=='固定期限'" v-model="data.dueDate" type="date" placeholder="选择日期" size="small" ></el-date-picker>
        </td>
      </tr>
      <tr>
        <td><span>*</span>计息基础</td>
        <td>
          <el-select v-model="data.countBasis" placeholder="请选择" size="small">
            <el-option v-for="item in jxjc" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td><span>*</span>结息方式</td>
        <td>
          <el-select v-model="data.bearingMethod" placeholder="请选择" size="small">
            <el-option v-for="item in jxfs" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>预期收益(%)</td>
        <td style="display: flex;">
          <el-input v-model="data.expectedReturnStart" placeholder="请输入" size="small"></el-input>
          <span style="width:20%; color: white; padding-top: 4px;">至</span>
          <el-input v-model="data.expectedReturnEnd" placeholder="请输入" size="small"></el-input>
        </td> 
        <td><span v-if="data.bearingMethod=='中途结息'"><span>*</span><span style='color: white;'>结息频率</span></span></td>
        <td>
          <el-select v-model="data.interestFrequency" placeholder="请选择" size="small" v-if="data.bearingMethod=='中途结息'">
            <el-option v-for="item in qxdw" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
    </table>
    <!-- --------------发行信息------------------- -->
    <p class="tableTitle">发行信息：</p>
    <table class="sTable">
      <tr>
        <td><span>*</span>发行机构名称</td>
        <td><el-input v-model="data.issuerName" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>发行机构统一社会信用代码</td>
        <td><el-input v-model="data.credit" placeholder="请输入" size="small"></el-input></td>
      </tr>
      <tr>
        <td><span>*</span>发行规模(万元)</td>
        <td><el-input v-model="data.scale" placeholder="请输入" size="small"></el-input></td>
        <td><span>*</span>是否非标资产</td>
        <td>
          <el-select v-model="data.isAsset" placeholder="请选择" size="small">
            <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>担保方式</td>
        <td>
          <el-select v-model="guaranteeMode" multiple placeholder="请选择" size="small">
            <el-option
              v-for="(item, index) in dbfs"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </td>
        <td><span>*</span>是否可提前赎回</td>
        <td>
          <el-select v-model="data.isRedeem" placeholder="请选择" size="small">
            <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td><span>*</span>是否可提前终止</td>
        <td>
          <el-select v-model="data.isTermination" placeholder="请选择" size="small">
            <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><span>*</span>产品描述</td>
        <td colspan="3">
          <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="data.illustrate"></el-input>
        </td>
      </tr>
    </table>
    <!-- ------------评级信息-------------- -->
    <p class="tableTitle">评级信息：</p>
    <table class="sTable">
      <tr>
        <td><span>*</span>风险评级</td>
        <td>
          <el-date-picker v-model="data.riskRatingStart" type="date" placeholder="请选择评级有效起始日" size="small"></el-date-picker>
        </td>
        <td style="background: #535853;">
          <el-date-picker v-model="data.riskRatingEnd" type="date" placeholder="请选择评级有效截止日" size="small"></el-date-picker>
        </td>
        <td>
          <el-select v-model="data.riskRating" placeholder="请选择" size="small">
            <el-option v-for="item in fxpj" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </td>
      </tr>
    </table>
    <!-- ------------行权利息-------------- -->
    <p class="tableTitle">基础资产:</p>
    <div class="bottomTable">
      <div class="table">
        <table>
          <tr>
            <td>资产名称</td>
            <td>项目名称</td>
            <td>融资人</td>
            <td>融资项目</td>
            <td>资金投向</td>
            <td>担保人</td>
            <td>质押标的</td>
            <td>产品管理人</td>
            <td>是否结构化</td>
            <td>操作</td>
          </tr>
          <tr v-for="(item, index) in basicAssets" :key="index">
            <td>{{item.assetsName}}</td>
            <td>{{item.entryName}}</td>
            <td>{{item.financier}}</td>
            <td>{{item.financingProject}}</td>
            <td>{{item.capitalInvestment}}</td>
            <td>{{item.guarantee}}</td>
            <td>{{item.subjectMatter}}</td>
            <td>{{item.productManager}}</td>
            <td>{{item.isStructured}}</td>
            <td style="min-width: 140px;">
              <el-button type="primary" size='small' @click="del(index)">删除</el-button>
            </td>
          </tr>
          <tr>
            <td>
              <el-input v-model="addTable.assetsName" placeholder="请输入" size="small"></el-input>
            </td>
            <td>
              <el-input v-model="addTable.entryName" placeholder="请输入" size="small"></el-input>
            </td>
            <td><el-input v-model="addTable.financier" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addTable.financingProject" placeholder="请输入" size="small"></el-input></td>
            <td>
              <el-select v-model="addTable.capitalInvestment" placeholder="请选择" size="small">
                <el-option v-for="item in zjtx" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </td>
            <td><el-input v-model="addTable.guarantee" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addTable.subjectMatter" placeholder="请输入" size="small"></el-input></td>
            <td><el-input v-model="addTable.productManager" placeholder="请输入" size="small"></el-input></td>
            <td>
              <el-select v-model="addTable.isStructured" placeholder="请选择" size="small">
                <el-option v-for="item in yesOrNo" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </td>
            <td><el-button type="primary" size="small" @click="add">添加</el-button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" size='small' @click="submit">提交</el-button>
      <el-button type="primary" size='small' @click="$router.go(-1)">取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FinancialDetail',
  data () {
    return {
      cplx: ['保本','非保本'],
      lllx: ['固定', '浮动'],
      syms: ['利率型', '净值'],
      fxff: ['公募','私募','招标'],
      fsffl: ['银行类金融机构','非行类金融机构'],
      fsyhxz: ['国有商业银行','全国股份制商业银行','地方性商业银行','省内农商行'],
      syfs: ['保证收益型','非保证收益型'],
      bblx: ['保本浮动收益','非保本浮动收益'],
      qxjg: ['固定期限','无固定期限'],
      qxdw: ['年','月','日'],
      jxjc: ['A/360','A/365'],
      jxfs: ['中途结息','利随本清'],
      fxpj: ['PR1','PR2','PR3','PR4','PR5'],
      zjtx: ['债券型','信托型','挂钩型','QDII 型产品'],
      dbfs: ['保证','抵押','质押','其他'],
      yesOrNo: ['是','否'],
      qixian: '',
      qixiandanwei: '',
      addTable: {
        assetsName: '',
        entryName: '',
        financier: '',
        financingProject: '',
        capitalInvestment: '',
        guarantee: '',
        subjectMatter: '',
        productManager: '',
        isStructured: ''
      },
      guaranteeMode: [],//担保方式
      data: {
        code: '',//产品代码
        name: '',//产品名称
        type: '',//产品类型
        rateType: '',//利率类型
        revenuePattern: '',//收益模式
        issuingMode: '',//发行方式
        classification: '',//发售方分类
        issuingBank: '',//发售银行性质
        incomeMethod: '',//收益方式
        evenType: '',//保本类型
        termStructure: '',//期限结构
        term: '',//期限
        interestDate: '',//起息日
        dueDate: '',//到期日
        countBasis: '',//计息基础
        bearingMethod: '',//结息方式
        expectedReturnStart: '',//预期收益
        expectedReturnEnd: '',//预期收益
        interestFrequency: '',//结息频率
        issuerName: '',//发行机构名称
        credit: '',//发行机构统一社会信用代码
        scale: '',//发行规模
        isAsset: '',//是否非标资产
        isRedeem: '',//是否可提前赎回
        isTermination: '',//是否可提前终止
        illustrate: '',//产品描述
        riskRating: '',//风险评级
        riskRatingStart: '',//评级有效起始日
        riskRatingEnd: '',//评级有效截止日
      },
      basicAssets: []
    };
  },
  mounted () {
  },
  methods: {
    submit () {
      let status = true;
      for(let k in this.data) {
        if (!this.data[k]) {
          status = false;
        }
      }
      // 判断担保方式是否有值
      if (this.guaranteeMode.length == 0) {
        status = false;
      }
      if (!status) {
        this.$message({message: '请您填写完整',type: 'warning'});
      } else {
        this.axios.post('financialProducts/addProduct',{financialProducts: this.data, guaranteeModes: this.guaranteeMode, basicAssets: this.basicAssets})
        .then(({data})=> {
          if (data.code == 200) {
            this.$router.go(-1);
          }
        })
      }
    },
    qixianBlur () {
      if (!this.qixiandanwei) {
         this.$message({message: '请选择期限单位',type: 'warning'});
      } else if(!this.qixian) {
         this.$message({message: '请输入期限值',type: 'warning'});
      } else {
        this.data.term = `${this.qixian}${this.qixiandanwei}`;
      }
    },
    // 查看付息计划表
    look() {
      this.$router.push('Interestpayment');
    },
    add() {
      for (let k in this.addTable) {
        if (!this.addTable[k]) {
          this.$message({message: '请填写完整',type: 'warning'});
          return false;
        }
      }
      this.basicAssets.push({assetsName: this.addTable.assetsName,entryName: this.addTable.entryName,financier: this.addTable.financier,financingProject: this.addTable.financingProject,capitalInvestment: this.addTable.capitalInvestment,guarantee: this.addTable.guarantee,subjectMatter: this.addTable.subjectMatter,productManager: this.addTable.productManager,isStructured: this.addTable.isStructured});
      for (let k in this.addTable) {
        this.addTable[k]= '';
      }
    },
    del(index) {
      this.basicAssets.splice(index, 1);
    }
  },
  watch: {
    'data.classification': {
        handler: function(xin, old) {
          if(xin=='银行类金融机构') {
            this.$set(this.data,'issuingBank','');
          } else {
            this.$delete(this.data,'issuingBank');
          }
        }
    },
    'data.incomeMethod': {
        handler: function(xin, old) {
          if(xin=='保证收益型') {
            this.$delete(this.data,'evenType');
          } else {
            this.$set(this.data,'evenType','');
          }
        }
    },
    'data.termStructure': {
        handler: function(xin, old) {
          if(xin=='固定期限') {
            this.$set(this.data,'term','');
            this.$set(this.data,'dueDate','');
          } else {
            this.$delete(this.data,'term');
            this.$delete(this.data,'dueDate');
          }
        }
    },
    'data.bearingMethod': {
      handler: function(xin, old) {
        if(xin=='中途结息') {
          this.$set(this.data,'interestFrequency','');
        } else {
          this.$delete(this.data,'interestFrequency');
        }
      }
    }
  }
};
</script>

<style lang="scss">
  #FinancialDetail {
    .tableTitle {
      height: 34px;
      line-height: 34px;
      color: white;
    }
    .el-select {
      width: 100%;
    }
    .el-date-editor {
      width: 100%;
    }
    .computer {
      display: flex;
      align-items: center;
      // justify-content: center;
      span {
        color: white !important;
      }
    }
    .sTable {
      width: 100%;
      td {
        padding: 5px 10px;
        text-align: center;
        &:nth-child(odd) {
          background-color: #181C1D;
          color: white;
        }
        &:nth-child(even) {
          background: #535853;
        }
        >span {
          color: red;
        }
      }
    }
    .bottomTable {
      table {
        border: 1px solid white;
        width: 100%;
        border-collapse: collapse;
          tr {
            &:first-child {
              background-color: #181C1D !important;;
              color: white;
              td {
                background-color: #181C1D !important;
              }
            }
            td {
              text-align: center;
              padding: 5px 10px;
              border-right: 1px solid white;
              border-bottom: 1px solid white;
              color: white;
              background: #2C3135;
            }
        }
      }
      .addwhite {
        height: 46px;
        background-color: white;
        padding: 0 20px;
        span {
          color: #cccccc;
          line-height: 46px;
        }
      }
    }
    .btn {
      text-align: center;
      margin: 20px 0;
    }
  }
</style>
